import React, { Component } from 'react';
import { connect } from 'dva';
import { Row,Col,Modal,Table,Button } from 'antd';
import styles from './Analysis.less';
import ExportJsonExcel from 'js-export-excel';//导出
/* eslint react/no-danger:0 */
@connect(({ statisticchart, loading }) => ({
  statisticchart,
  loading: loading.effects['statisticchart/fetch'],
}))
class StaffBaseInfoList extends Component {
  state = {
    modalByStaffBaseInfo: false,
    tableListDataByStaffBaseInfo: [
			{name:"阳泰顺", sex:"女", nation:"汉族", politics_face:"中共党员", person_type:"机关工勤人员", post_type:"综合管理警官"},
			{name:"鲍翰东", sex:"男", nation:"蒙古族", politics_face:"预备党员", person_type:"企业工勤人员", post_type:"综合管理警员"},
			{name:"姜成发", sex:"男", nation:"回族", politics_face:"中共党员", person_type:"企业管理人员", post_type:"执法勤务警官"},
			{name:"谷军", sex:"男", nation:"满族", politics_face:"民进", person_type:"机关工勤人员", post_type:"执法勤务警员"},
			{name:"宋宜仪", sex:"女", nation:"维吾尔族", politics_face:"农工党", person_type:"专业技术类", post_type:"警务技术警官"},
			{name:"王成", sex:"男", nation:"藏族", politics_face:"群众", person_type:"专业技术类", post_type:"警务技术警员"},
		],
    tableListDataByStaffTotal: [
			{ordernum:"1", nation:"汉族", politics_face:"中共党员", person_type:"机关工勤人员", post_type:"综合管理警官",total: 10},
			{ordernum:"2",nation:"蒙古族", politics_face:"预备党员", person_type:"企业工勤人员", post_type:"综合管理警员",total: 20},
			{ordernum:"3",nation:"回族", politics_face:"中共党员", person_type:"企业管理人员", post_type:"执法勤务警官",total: 15},
			{ordernum:"4",nation:"满族", politics_face:"民进", person_type:"机关工勤人员", post_type:"执法勤务警员",total: 18},
			{ordernum:"5",nation:"维吾尔族", politics_face:"农工党", person_type:"专业技术类", post_type:"警务技术警官",total: 12},
			{ordernum:"6",nation:"藏族", politics_face:"群众", person_type:"专业技术类", post_type:"警务技术警员",total: 10},
		]
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'statisticchart/get_prostaff_list',
    });
  }

  columnsByStaffTotal = [
        {
          title: '序号',
          dataIndex: 'ordernum',
          key: 'ordernum',
        },
  			{
          title: '民族',
          dataIndex: 'nation',
          key: 'nation',
        },  {
          title: '人员类别',
          dataIndex: 'person_type',
          key: 'person_type',
        }, {
          title: '政治面貌',
          dataIndex: 'politics_face',
          key: 'politics_face',
        }, {
          title: '职务类别',
          dataIndex: 'post_type',
          key: 'post_type',
        },
        {
          title: '总人数',
          dataIndex: 'total',
          key: 'total',
        }
  ];

  columnsByStaffBaseInfo = [
				{
	        title: '姓名',
	        dataIndex: 'name',
	        key: 'name',
        },  {
	        title: '性别',
	        dataIndex: 'sex',
	        key: 'sex',
        }, 	{
	        title: '民族',
	        dataIndex: 'nation',
	        key: 'nation',
        },  {
	        title: '人员类别',
	        dataIndex: 'person_type',
	        key: 'person_type',
        },  {
	        title: '政治面貌',
	        dataIndex: 'politics_face',
	        key: 'politics_face',
        },  {
	        title: '职务类别',
	        dataIndex: 'post_type',
	        key: 'post_type',
        }
	];

  //导出excel
  downloadExl = () => {
    const {
      statisticchart: {
        staffDetialData
      },
    } = this.props;
    	var option={};
    	// let dataTable = [];
    	// if(selectedRows) {
     //  	for(let i in selectedRows) {
     //    		if(selectedRows){
  	  //       	let obj = {
  		 //          '单位全称': selectedRows[i].company,
  		 //          '单位隶属关系': selectedRows[i].unit_affiliation,
  		 //          '单位性质': selectedRows[i].type_of_unit,
  		 //          '单位级别': selectedRows[i].unit_level,
  		 //          '单位所在政区': selectedRows[i].administrative_area,
  		 //        }
     //      		dataTable.push(obj);
     //    		}
     //  	}
    	// }
  	  option.fileName = '人员统计信息'
  	  option.datas=[
  	    {
  	      sheetData:staffDetialData.list || [],
  	      sheetName:'人员统计信息',
  	      sheetHeader:['姓名','性别','民族','政治面貌','人员类别','职务类别'],
  	      columnWidths: [10,10,10,10,10,10],
  	      columnHeights: [10,10,10,10,10,10]
  	    }
  	  ];

  	  var toExcel = new ExportJsonExcel(option);
  	  toExcel.saveExcel();
  }

  //人员信息弹窗
	handleModalByStaffBaseInfo = flag => {
		this.setState({
			modalByStaffBaseInfo: !!flag,
		});
	};

  render() {
    const {
      statisticchart: {
      	staffListData,
        staffDetialData
      },
      modalStaffVisible,
      handleStaffModalVisible
      } = this.props;
    const { modalByStaffBaseInfo,tableListDataByStaffBaseInfo,tableListDataByStaffTotal } = this.state;
    return (
    <div>
     	<Modal
			width={800}
			centered
			destroyOnClose
			title="人员详情"
			visible={modalByStaffBaseInfo}
			onOk={()=> this.handleModalByStaffBaseInfo()}
			onCancel={()=> this.handleModalByStaffBaseInfo()}
			>
      <Button type="primary" icon="download" onClick={this.downloadExl} style={{float: 'right',zIndex: 1000,marginBottom: '10px',marginTop: '-14px'}}>
      导出
      </Button>
			<Table  columns={this.columnsByStaffBaseInfo} dataSource={staffDetialData?staffDetialData.list: []}/>
		</Modal>
    <Modal
    	width={800}
    	centered
    	destroyOnClose
    	title="人员统计表"
    	visible={modalStaffVisible}
    	onOk={()=> handleStaffModalVisible()}
    	onCancel={()=> handleStaffModalVisible()}
    	>
    	<Table
        columns={this.columnsByStaffTotal}
        dataSource={staffListData?staffListData.list: []}
        rowClassName={(record, index) => {
          return styles.statisticListStyle;
        }}
        onRow={record => {
          return {
            onClick: event => {
              handleStaffModalVisible();
              const { dispatch } = this.props;
              dispatch({
                type: 'statisticchart/get_prostaff_detail',
              });
              this.handleModalByStaffBaseInfo(true)
            }, // 点击行
          };
        }}
      />
    </Modal>
    </div>
    );
  }
}

export default StaffBaseInfoList;
